<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

onMounted(() => {
  window.$wujie?.bus.$on('vue3-router-change', (path: string) => {
    router.push(path)
  })
})

// 在 vue3-sub 路由下主动告诉主应用路由跳转，主应用也跳到相应路由且高亮菜单栏
// 换句话说这个是在子应用内切换路由时告诉主应用路由切换到相应路由
watch(() => route.path, () => {
  window.$wujie?.bus.$emit('sub-route-change', 'vue3', route.path)
})


// 获取主应用的参数
// const getProps = () => {
//   const wujieProps = window.$wujie?.props // 子应用获取主应用数据方式一
//   console.log(wujieProps)
//   console.log(window.$wujie)
//   console.log(window.parent.globalName) // 子应用获取主应用数据方式二

//   window.$wujie.bus.$emit('doHandler', '我是子应用的数据')
// }

// window.childVueName = '我是子应用Vue3'
</script>

<template>
  <div>
    <!-- <button @click="getProps">获取无界主应用传递的参数</button> -->
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <router-link to="/hello">首页</router-link> | 
  <router-link to="/testa">测试A页面</router-link> | 
  <router-link to="/testb">测试B页面</router-link>
  <router-view></router-view>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
